<template>
  <div id="transfer">
    <div class="title2">
      <img src="../../assets/img/huazhuan.png" alt />
      <div>
        <p>划转</p>
        <p>支持OTC钱包与电竞钱包互相划转</p>
      </div>
    </div>
    <div class="toggle">
      <div class="toggle-left">
        <p>OTC钱包</p>
        <p>9540.67 USDT</p>
      </div>
      <img
        @click="imgStatus = !imgStatus"
        :class="[imgStatus?'imgActive':'']"
        src="../../assets/img/hz.png"
        alt
      />
      <div class="toggle-right">
        <p>电竞钱包</p>
        <p>9540.67 USDT</p>
      </div>
    </div>

    <div class="deal">
      <p style="color:#344E50">转账金额</p>
      <div class="inputs">
        <input type placeholder="输入转账金额" />
        <span>全部金额</span>
      </div>
    </div>
    <div class="submit pay-btn">确认</div>
  </div>
</template>
<script>
export default {
  name: "transfer",
  data() {
    return {
      imgStatus: false
    };
  },
  methods: {}
};
</script>
<style lang='less' scope>
@import url('../../assets/css/comm.css');
// ----------------------------
#transfer {
  .title2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  .toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 0;
    .toggle-left {
      border: 1px solid #ffd1ba;
      background-color: #fff7f3;
      width: 280px;
      padding: 25px 20px;
      background: url("../../assets/img/otcqianbao.png") no-repeat right center;
      > p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 16px;
        color: #a1b1b0;
      }
      > p:nth-child(2) {
        font-size: 20px;
        color: #ff8f4e;
      }
    }
    .toggle-right {
      border: 1px solid #90bbd7;
      background-color: #f3faff;
      width: 280px;
      padding: 25px 20px;
      background: url("../../assets/img/dianjingqianbao.png") no-repeat right
        center;
      > p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 16px;
        color: #a1b1b0;
      }
      > p:nth-child(2) {
        font-size: 20px;
        color: #557fb7;
      }
    }
    > img {
      margin: 0 20px;
      cursor: pointer;
      transition: all 1s;
    }
    > .imgActive {
      transform: rotate(180deg);
    }
  }
  .deal{
    margin: 0 0 30px 0;
  }
  .submit{
    width: 280px;
    margin-bottom: 40px
  }
}
</style>